<template>
    <div class="homeNav-Content">
        <ul>
            <li class="Content-list" v-for="data in list" :key="data.id" @click="fun()">
                <div class="two-img" v-if="data.img.length===2">
                    <div class="Content-list-img">
                        <img src="../../assets/meirong.jpg" alt="">
                        <p>before</p>
                    </div>
                    <div class="Content-list-img">
                        <img src="../../assets/meirong1.jpg" alt="">
                        <p>after</p>
                    </div>
                </div>
                <div class="one-img" v-if="data.img.length===1">
                        <img src="../../assets/meirong1.jpg" alt="">
                </div>
                <div class="Content-list-text">
                    <h1>{{data.title}}</h1>
                    <p>
                        {{data.text}}
                    </p>
                    <div class="Content-list-ues">
                        <div class="Content-list-uesImg">
                            <img src="../../assets/meirong1.jpg" alt="">
                            <p>{{data.usename}}</p>
                        </div>
                        <div class="Content-list-zan">
                            <div class="Content-list-icon"><Icon type="ios-eye" size="25" class="icon" /> <span>24564</span></div>
                            <div class="Content-list-icon"><Icon type="md-images" size="20" class="icom icon"/> <span>24564</span></div>
                            <div class="Content-list-icon"><Icon type="md-thumbs-up" size="20" class="icom icon"/> <span>24564</span></div>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                </div>
            </li>
        </ul>
        <div style="clear: both"></div>
    </div>
</template>

<script>
    export default {
        name: "homeNavContent",
        data () {
            return {
                list: [
                    {id: 1, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'定点双眼皮',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮'},
                    {id: 2, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'定点双眼皮',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'../../assets/meirong1.jpg',usename:'定点双眼皮'},
                    {id: 3, img:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'], title:'定点双眼皮',text:'拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦，拆完线之后消肿真是神速！！术后 20 多天啦 ~照镜子看着顺眼多了啊，又变窄了一丁点，主要是眼睛能睁大了整个人精神多啦',useimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',usename:'定点双眼皮'},
                ]
            }
        },
        methods :{
            fun () {
                this.$router.push({path:'/diarydetails'})
            }
        }
    }
</script>

<style scoped lang="less">
    .homeNav-Content{
        background-color: #fff;
        padding: 21px 0 21px 0;
       .Content-list{
           height: 192px;
           border-bottom: 1px  solid #e4e4e4;
           padding: 21px 0 21px 0;
           .one-img{
               width: 305px;
               height: 150px;
               float: left;
               img{
                   width: 100%;
                   height:100%;
                   border-radius: 5px;
               }
           }
           .Content-list-img{
               float: left;
               margin-right: 5px;
               width: 150px;
               height: 150px;
               img{
                   width: 100%;
                   height: 100%;
                   border-radius: 5px;
               }
               p{
                   position: absolute;
                   width: 150px;
                   z-index: 1;
                   color: #ffff;
                   text-align: center;
                   height: 22px;
                   line-height: 22px;
                   background-color: rgba(0,0,0,0.4);
                   margin-top: -27px;
                   border-radius: 0 0 5px 5px;
               }
           }
           .Content-list-text{
               width: 560px;
               float: left;
               height: 100%;
               margin-left: 15px;
               h1{
                   font-size: 16px;
                   color: #ff5b9a;
                   font-weight: normal;
                   padding-bottom: 20px;
               }
               p{
                   font-size: 14px;
                   color: #777777;
                   letter-spacing: 0;
                   text-align: justify;
                   padding-bottom:8px;
               }
           }
            .Content-list-ues{
                height: 30px;
                .Content-list-uesImg{
                    width: 105px;
                    height: 30px;
                    float: left;
                    img{
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        float: left;
                    }
                    p{
                        font-size: 14px;
                        color: #ff5b9a;
                        float: left;
                        line-height: 30px;
                        padding-left: 4px;
                    }
                }
                .Content-list-zan{
                    float: right;
                    width: 260px;
                    height: 30px;
                    .Content-list-icon{
                        width: 70px;
                        height: 30px;
                        line-height: 30px;
                        float: left;
                        margin-right: 15px;
                        span{
                           padding-left: 8px;
                           color: #999999;
                        }
                    }
                    .icom{
                        margin-top: -4px;
                    }
                    .icon{
                        color: #999999;
                    }
                }
          }
      }
    }
    .Content-list:hover{
        border-bottom: 1px  solid #ff82a4;
        background-color: #f8f8f8;
    }
    .Content-list:hover .Content-list-img p{
        background-color: rgba(255,91,154,0.4);
    }

</style>